<template>
  <div id="zhishi">
    <!-- 导航 -->
    <div class="all-tab">
      <div
        v-for="(item, index) in labels"
        :key="index"
        :class="{active: active === index}"
        @click="handleNavItemClick(index)"
      >
        <!-- <router-link :to="item.path">{{ item.bookName }}</router-link> -->
        {{ item.bookName }}
      </div>
      <!-- <div
        v-for="(item, index) in tabList"
        :key="index"
        :class="{ active: index === active }"
        @click="setActive(index)"
      >
        <router-link :to="item.path">{{ item.title }}</router-link>
      </div> -->
    </div>
    <div class="view-content">
      <!-- 二级路由 -->
      <router-view />
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      labels: [],
      active: 0,
      tabList: [
        {
          title: "计算机编程基础",
          path: "/zhishi",
        },
        {
          title: "机械设计基础",
          // path: "/zhishi/jiji",
        },
        {
          title: "工程力学",
          // path: "/zhishi/gongyilixue",
        },
        {
          title: "电子技术基础",
          // path: "/zhishi/dianyejichu",
        },
      ],
    };
  },
  // watch: {
  //   $route(to) {
  //     const index = this.tabList.findIndex((item) => item.path === to.path);
  //     if (index !== -1) {
  //       this.active = index;
  //     }
  //   },
  // },
  created() {
    this.getLabel();
  },
  methods: {
    getLabel() {
      const url = "/dify/getBookInfo";
      this.$axios.get(url).then((response) => {
        const res = response;
        if (res.code === 200) {
          // console.log(res.data, 2);
          this.labels = res.data;
          // const index = this.tabList.findIndex(
          //   (item) => item.path === this.$route.path
          // );
          // if (index !== -1) {
          //   this.active = index;
          // }
        }
      });
    },
    handleNavItemClick(index) {
      this.active = index;
      this.$router.push(this.teaNavList[index].url);
    },
  },
};
</script>
<style lang="scss" scoped>
#zhishi {
  margin-bottom: 20px;
  .all-box {
    padding: 20px;
    box-sizing: border-box;
  }
  .view-content {
    .one-btns {
      display: flex;
      justify-content: flex-end;
      margin-bottom: 12px;
    }
  }
}
</style>